<template>
  <el-dialog
    append-to-body
    title="店铺绑定师傅二维码"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    align="left"
    v-loading="currLoading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    width="600px">
    <div align="center">
      <canvas ref="qrCanvasId"></canvas>
      <div>二维码刷新时间: <cutdown-box v-if="currCutdownSeconds>0" :curr-seconds-params="currCutdownSeconds" :callback="getQrcode"/></div>
      <div style="width: 80%; padding: 5px; background: #b6e5ca; border: 1px solid #218861; margin-top: 20px;" v-if="bindingNums>0">
        当前二维码,已有 <span class="price-font" v-text="bindingNums"></span> 个用户绑定(近5分钟内)
      </div>
    </div>
  </el-dialog>
</template>

<script>
import QRCode from 'qrcode'
import CutdownBox from '../Common/CutdownBox'

export default {
  name: 'BindingQrDialog',
  components: {CutdownBox},
  data: function () {
    return {
      timer:false,
      dialogVisible: false,
      currLoading: false,
      qrCode: "",
      bindingNums:0,
      currCutdownSeconds: 0,
      qrCodeStyle:{
        width:180,
        height:180,
      },
    }
  },
  destroyed () {

  },
  watch:{
    'dialogVisible':function () {
      if (!this.dialogVisible){
        clearInterval(this.timer)
      }
    }
  },
  mounted () {

  },
  methods: {
    getBindingMember:function () {
      let $this=this
      $this.bindingNums=0
      $this.MyRequest(this.ApiDoNameShop + "Shop/getNearlyBindingNums", {}, function (bindingNums) {
        if (bindingNums>0){
          $this.bindingNums=bindingNums
        }
        $this.$forceUpdate()
      }, function () {
        $this.$message.warning('操作失败，请重试')
        $this.$forceUpdate()
      })
    },
    open: function () {
      this.dialogVisible = true
      let $this=this
      $this.timer=setInterval(function () {
        $this.getBindingMember()
      },3000)
      this.getQrcode()
      this.$forceUpdate()
    },
    getQrcode: function () {
      let $this = this
      $this.currLoading = true
      $this.currCutdownSeconds = 0
      $this.MyRequest(this.ApiDoNameShop + "Shop/getBindingQr", {}, function (qrCode) {
        $this.setQr(qrCode)
        $this.currLoading = false
        $this.$forceUpdate()
      }, function () {
        $this.$message.success('操作失败，请重试')
        $this.currLoading = false
        $this.$forceUpdate()
      })
    },
    setQr:function (str) {
      let $this=this
      var jsonString=JSON.stringify({
        event:'BindingShop',
        qrCode:str,
      })
      setTimeout(function () {
        QRCode.toCanvas(
          $this.$refs.qrCanvasId,
          jsonString,
          { width:$this.qrCodeStyle.width, height:$this.qrCodeStyle.height, toSJISFunc: QRCode.toSJIS },
          error => {}
        );
        $this.currCutdownSeconds=60
      },500)
    },
  }
}
</script>

<style scoped>

</style>
